<template>
  <view class="ikz-bid">
    <ikz-loading :css-data="loading_css"></ikz-loading>
    <!-- ad -->
    <!-- list -->
    <view>
      <view class="ikz-sticky-box" id="ikz-sticky-box">
        <view
          class="ikz-sticky-title"
          v-for="(item, index) in type_list.list"
          :key="index"
        >
          <text
            class="ikz-textcenter"
            :class="{ active: current == index }"
            @click="change"
            :data-index="index"
            :data-id="item.id"
          >
            {{ item.server_name }}
          </text>
        </view>
      </view>
      <view class="ikz-box">
        <view
          class="ikz-sticky-item"
          v-for="(item, index) in show_info.list"
          :key="index"
          @click="godetail(item.id)"
        >
          <view class="ikz-sticky-top" v-if="item.super_goods">
            <view class="ikz-sticky-head">
              <image
                class="ikz-sticky-img"
                :src="
                  'https://dexinhebei.com/' + item.super_goods.goods[0].image
                "
              ></image>
            </view>
            <view class="ikz-sticky-head-right">
              <view
                class="ikz-sticky-head-right-box"
                style="justify-content: space-between"
              >
                <view class="ikz-sticky-head-name">
                  {{ item.super_goods.goods[0].name }}
                </view>
                <view class="ikz-sticky-head-time">
                  {{ item.time }}
                </view>
              </view>
              <view class="ikz-sticky-head-right-box">
                <view class="ikz-sticky-head-card">
                  <template v-if="item.type == 2">
                    <!-- 快递自取 -->
                    快递自取
                  </template>
                  <template v-else-if="item.type == 1 && item.super_goods">
                    <!-- 校园跑腿-商家 -->
                    商家订单-商家
                  </template>
                  <template v-else-if="item.type == 1 && !item.super_goods">
                    <!-- 校园跑腿 -->
                    跑腿订单-个人
                  </template>
                  <template v-else>
                    {{ item.type_text }}
                  </template>
                </view>
                <view class="ikz-sticky-head-price">
                  ￥{{ item.super_goods.goods[0].price }}
                </view>
              </view>
            </view>
          </view>
          <view class="ikz-sticky-top" v-else>
            <view class="ikz-sticky-head">
              <image class="ikz-sticky-img" :src="item.avatar"></image>
            </view>
            <view class="ikz-sticky-head-right">
              <view class="ikz-sticky-head-right-box">
                <view class="ikz-sticky-head-name">
                  {{ item.nickname }}
                </view>
                <view class="ikz-sticky-head-time">
                  {{ item.time }}
                </view>
              </view>
              <view class="ikz-sticky-head-right-box">
                <view class="ikz-sticky-head-card">
                  <template v-if="item.type == 2">
                    <!-- 快递自取 -->
                    快递自取
                  </template>
                  <template v-else-if="item.type == 1 && item.super_goods">
                    <!-- 校园跑腿-商家 -->
                    商家订单-商家
                  </template>
                  <template v-else-if="item.type == 1 && !item.super_goods">
                    <!-- 校园跑腿 -->
                    跑腿订单-个人
                  </template>
                  <template v-else>
                    {{ item.type_text }}
                  </template>
                </view>
                <view class="ikz-sticky-head-price">
                  ￥{{ item.total_fee }}
                </view>
              </view>
            </view>
          </view>

          <view class="ikz-sticky-content" v-if="item.information">
            {{ item.information }}
          </view>
          <view>
            <view class="ikz-sticky-end">
              <view class="ikz-sticky-start" v-if="item.game_platform">
                <view class="ikz-sticky-spot2"></view>
                游戏名称：{{ item.game_platform }}
              </view>
            </view>
            <view class="ikz-sticky-end">
              <view class="ikz-sticky-start" v-if="item.game_time">
                <view class="ikz-sticky-spot1"></view>
                游戏时长：{{ item.game_time }}
              </view>
            </view>
            <view class="ikz-sticky-end">
              <view class="ikz-sticky-start" v-if="item.receive_limit">
                <view class="ikz-sticky-spot"></view>
                游戏限制：{{ item.receive_limit }}
              </view>
            </view>
            <view class="ikz-sticky-end">
              <view class="ikz-sticky-start" v-if="item.expected_delivery_time">
                <view class="ikz-sticky-spot"></view>
                预计交货时间：{{ item.expected_delivery_time }}
              </view>
            </view>

            <view class="ikz-sticky-end">
              <view class="ikz-sticky-start" v-if="item.lease_duration">
                <view class="ikz-sticky-spot2"></view>
                租借时长：{{ item.lease_duration }}
              </view>
            </view>
            <view class="ikz-sticky-end">
              <view class="ikz-sticky-start" v-if="item.hope_arrive">
                <view class="ikz-sticky-spot2"></view>
                期望送达：{{ item.hope_arrive }}
              </view>
            </view>
            <view class="ikz-sticky-end" v-if="item.status == 2">
              <view class="ikz-sticky-start">
                <view class="ikz-sticky-spot2"></view>
                配送状态：
                <!-- {{ item.receive_time }}{{ item.hope_arrive }} -->
                <span :style="{ color: item.overtimeInfo.color }">
                  {{ item.overtimeInfo.text }}
                </span>
              </view>
              <view
                v-if="
                  item.status == 2 &&
                  show_info.type == 1 &&
                  show_info.super_goods
                "
                view
                class="ikz-sticky-start"
                style="color: #ff6565; font-size: 24rpx; margin-top: 10rpx"
              >
                <uni-icons
                  type="info"
                  size="16"
                  color="#f40"
                  style="margin-right: 5px"
                ></uni-icons>
                如超时十分钟，可免责取消订单,系统将会退回全部费用。
              </view>
            </view>
            <view class="ikz-sticky-start" v-if="item.start">
              <view class="ikz-sticky-spot"></view>
              起点：{{ item.start }}
            </view>
            <view class="ikz-sticky-end">
              <view class="ikz-sticky-start" v-if="item.destination">
                <view class="ikz-sticky-spot1"></view>
                目的地：{{ item.destination }}
              </view>
            </view>

            <view class="ikz-sticky-buttom" v-if="item.status == 0">
              <view
                class="ikz-sticky-btn"
                @click.stop="pay(item.id, item.total_fee)"
              >
                去支付
              </view>

              <div style="display: flex; justify-content: space-between">
                <!-- <view class="ikz-sticky-buttom" v-if="item.status == 2">
                  <view class="ikz-sticky-btn4"  style="    background: #425bd5;"> 商家已抢单 </view>
                </view> -->
                <view
                  class="ikz-sticky-buttom"
                  v-if="item.receive_id && item.status == 2 && item.status != 4"
                >
                  <view class="ikz-sticky-btn4" style="background: #4caf50">
                    骑手已抢单
                  </view>
                </view>
                <view
                  v-if="item.status == 1 && item.type == 1 && item.super_goods"
                  class="ikz-sticky-btn1"
                  @click.stop="cancel(item.id, index, item)"
                >
                  取消订单
                </view>

                <view
                  v-if="
                    item.status == 1 &&
                    (item.type == 1 || item.type == 2) &&
                    !item.super_goods
                  "
                  class="ikz-sticky-btn1"
                  @click.stop="cancel1(item.id, index, item)"
                >
                  取消订单
                </view>
              </div>
            </view>
            <!-- <view class="ikz-sticky-buttom" v-if="item.status == 2">
              <view class="ikz-sticky-btn4"> 商家已抢单 </view>
            </view>
            <view class="ikz-sticky-buttom" v-if="item.receive_id">
              <view class="ikz-sticky-btn4"> 骑手已抢单 </view>
            </view> -->
            <view class="ikz-sticky-buttom" v-if="item.status == 3">
              <view class="ikz-sticky-btn3"> 已完成 </view>
            </view>
            <view style="display: flex; justify-content: space-between">
              <!-- <view class="ikz-sticky-buttom" v-if="item.status == 2">
                <view class="ikz-sticky-btn4" style="    background: #425bd5;" > 商家已抢单 </view>
              </view> -->
              <view
                class="ikz-sticky-buttom"
                v-if="item.receive_id && item.status == 2"
              >
                <view class="ikz-sticky-btn4" style="background: #4caf50">
                  骑手已抢单
                </view>
              </view>
              <view class="ikz-sticky-buttom" v-if="item.status == 2">
                <view
                  class="ikz-sticky-btn1"
                  @click.stop="cancel(item.id, index, item)"
                >
                  取消订单
                </view>
              </view>
              <view
                class="ikz-sticky-buttom"
                style="
                  margin-right: 40rpx;
                  display: flex;
                  justify-content: flex-end;
                "
                v-if="item.status == 1"
              >
                <view
                  class="ikz-sticky-btn1"
                  @click.stop="cancel(item.id, index, item)"
                >
                  取消订单
                </view>
              </view>
              <view class="ikz-sticky-buttom" v-if="item.status == 4">
                <view class="ikz-sticky-btn3"> 已取消 </view>
              </view>
            </view>
            <view
              v-if="item.status == 4 && item.super_goods.cancel_reason"
              view
              class="ikz-sticky-start"
              style="color: #ff6565; font-size: 24rpx; margin-top: 10rpx"
            >
              <uni-icons
                type="info"
                size="16"
                color="#f40"
                style="margin-right: 5px"
              ></uni-icons>
              取消原因：{{ item.super_goods.cancel_reason }}
            </view>
            <view v-if="item.status == 8" style="color: #f40">
              需要商家审核，请耐心等待，可打电话催促。
            </view>
            <view class="ikz-sticky-buttom" v-if="item.status == 7">
              <view class="ikz-sticky-btn3"> 已送达 </view>
              <view
                class="ikz-sticky-btn2"
                @click.stop="confirm(item.id, index)"
              >
                确认收货
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="ikz-more" v-if="load_more == 4"> ——我也是有底线的—— </view>
      <view class="ikz-more" v-if="load_more == 5">
        <image class="ikz-empty" src="/static/empty.png"></image>
      </view>
    </view>
    <!-- list -->
  </view>
</template>

<script>
import ikzLoading from "@/pages/Component/Public/Loading/loading.vue";
import ikzGlist from "@/pages/Component/Module/Campus/Public/Order/myorder/index.vue";
var app = getApp();
import ikz from "@/pages/Common/tools.js";
export default {
  components: {
    ikzLoading,
    ikzGlist,
  },
  data() {
    return {
      loading_css: {
        display: "flex",
      },
      status: "",
      show_info: {
        list: [],
      },
      type_list: {
        list: [
          {
            id: "",
            server_name: "全部",
          },
          {
            id: "0",
            server_name: "待付款",
          },
          {
            id: "1",
            server_name: "待接单",
          },
          {
            id: "2",
            server_name: "已抢单",
          },
          {
            id: "4",
            server_name: "已取消",
          },
          {
            id: "3",
            server_name: "已完成",
          },
        ],
      },
      page: 1,
      limit: 10,
      load_more: 2,
      template_id: {},
      type_index: "",
      current: 0,
      show_status: 2,
      overtimeInfo: {}, // 用于存储每个订单的配送状态信息
      intervalTimer: null, // 定时器
    };
  },
  mounted() {
    this.startInterval(); // 启动定时器
    this.templateId((res) => {
      this.loading_css.display = "none";
    });
  },
  beforeDestroy() {
    this.clearInterval(); // 清除定时器
  },
  watch: {
    "show_info.list": {
      handler(newList) {
        if (newList && newList.length > 0) {
          newList.forEach((item) => {
            if (item.status == 2 && item.receive_time && item.hope_arrive) {
              // 初始化配送状态
              this.$set(
                item,
                "overtimeInfo",

                this.calculateOverTime1(
                  item.receive_time,
                  this.formatDateTime(item.hope_arrive)
                )
              );
            }
          });
        }
      },
      immediate: true,
      deep: false, // 移除深度监听
    },
  },
  onLoad(options) {
    this.status = options.status || "";
    if (this.status == "") {
      this.current = 0;
    } else if (this.status == 0) {
      this.current = 1;
    } else if (this.status == 1) {
      this.current = 2;
    } else if (this.status == 2) {
      this.current = 3;
    } else if (this.status == 3) {
      this.current = 5;
    } else if (this.status == 4) {
      this.current = 4;
    }
    this.orderList((res) => {
      this.loading_css.display = "none";
    });

    // 添加提示
    uni.showModal({
      title: "提示",
      content: "订单列表，只会显示商家已抢单的订单，请耐心等待...",
      showCancel: false,
      confirmText: "我知道了",
      success: function (res) {},
    });
  },
  onShow() {
    if (this.show_status == 2) {
      this.show_status = 3;
    } else {
      this.page = 1;
      this.orderList((res) => {
        this.loading_css.display = "none";
      });
    }
  },
  onPullDownRefresh() {
    this.page = 1;
    this.orderList((res) => {
      uni.stopPullDownRefresh();
    });
  },
  onReachBottom() {
    if (this.load_more == 2) {
      this.page++;
      this.load_more = 3;
      this.orderList((res) => {});
    }
  },
  methods: {
    //获取模板参数
    templateId(fn) {
      var path = "/xyb/wechat_mini_push/template_id_list";
      var data = {};
      ikz.post(path, data, (res) => {
        if (res.data.code) {
          this.template_id = res.data.data;
          console.log("template_id的值", this.template_id);
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
        fn();
      });
    },
    formatDateTime(input) {
      // 使用正则表达式匹配日期和时间部分
      const match = input.match(
        /^(\d{4})-(\d{1,2})-(\d{1,2}) (\d{1,2}):(\d{2})-(\d{1,2}):(\d{2})$/
      );
      if (!match) {
        return input; // 如果不是目标格式，直接返回原字符串
      }

      // 提取年、月、日和时间部分
      const [_, year, month, day, startHour, startMinute, endHour, endMinute] =
        match;

      // 格式化月份和日期为两位数
      const formattedMonth = String(month).padStart(2, "0");
      const formattedDay = String(day).padStart(2, "0");

      // 格式化时间部分
      const formattedStartHour = String(startHour).padStart(2, "0");
      const formattedEndHour = String(endHour).padStart(2, "0");

      // 返回格式化后的字符串
      return `${year}-${formattedMonth}-${formattedDay} ${formattedStartHour}:${startMinute}-${formattedEndHour}:${endMinute}`;
    },
    // ... existing methods ...
    startInterval() {
      this.intervalTimer = setInterval(() => {
        if (this.show_info.list && this.show_info.list.length > 0) {
          this.show_info.list.forEach((item) => {
            if (item.status == 2 && item.receive_time && item.hope_arrive) {
              // 更新配送状态
              this.$set(
                item,
                "overtimeInfo",
                this.calculateOverTime1(
                  item.receive_time,
                  this.formatDateTime(item.hope_arrive)
                )
              );
            }
          });
        }
      }, 1000); // 每秒更新一次
    },
    clearInterval() {
      if (this.intervalTimer) {
        clearInterval(this.intervalTimer); // 清除定时器
        this.intervalTimer = null;
      }
    },
    //请求页面数据
    orderList(fn) {
      var path = "/xyb/order/index";
      var data = {
        page: this.page,
        limit: this.limit,
        eq_status: this.status,
      };
      ikz.post(path, data, (res) => {
        if (res.data.code) {
          console.log(res);
          var temp_list = res.data.data.data;
          if (this.page != 1) {
            for (var i = 0; i < temp_list.length; i++) {
              this.show_info.list.push(temp_list[i]);
            }
          } else {
            this.show_info.list = temp_list;
          }
          if (temp_list.length == this.limit) {
            this.load_more = 2;
          } else {
            if (this.page == 1) {
              if (temp_list.length == 0) {
                this.load_more = 5;
              } else {
                this.load_more = 4;
              }
            } else {
              this.load_more = 4;
            }
          }
          this.$forceUpdate();
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
        fn();
      });
    },
    godetail(id) {
      uni.navigateTo({
        url:
          "/pages/Component/Module/Campus/Program/Order/myorderdetail/index?id=" +
          id,
      });
    },
    change: function (e) {
      this.current = e.currentTarget.dataset.index;
      this.status = e.currentTarget.dataset.id;
      this.page = 1;
      this.orderList((res) => {});
    },
    pay(id, total_fee) {
      uni.navigateTo({
        url:
          "/pages/Component/Module/Payment/Program/pay/index/index?orderid=" +
          id +
          "&total_price=" +
          total_fee,
      });
    },

    calculateOverTime(receiveTime, hopeArrive) {
      // //console.log(receiveTime, hopeArrive, "ddddddddddd");
      // 如果缺少必要参数，返回默认值
      if (!receiveTime || !hopeArrive)
        return { text: "正常配送中", color: "green" };

      // 解析预计送达时间范围
      const [date, timeRange] = hopeArrive.split(" ");
      const [startTime, endTime] = timeRange.split("-");

      // 构造预计送达时间结束点
      const hopeArriveEndDate = new Date(`${date}T${endTime}:00`);
      const now = new Date();

      // 如果当前时间小于预计送达时间结束点，返回正常配送中
      if (now < hopeArriveEndDate)
        return { text: "正常配送中...", color: "green" };

      // 计算超时时间
      const diff = now - hopeArriveEndDate;
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor(
        (diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
      );
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);

      let result = "已超时：";

      // console.log(days, hours, minutes, seconds, "222222222");

      if (days > 0) result += `${days}天`;
      if (hours > 0) result += `${hours}小时`;
      if (minutes > 0) result += `${minutes}分钟`;
      if (seconds > 0) result += `${seconds}秒`;

      return { text: result, color: "#FF5722" };
    },
    calculateOverTime1(receiveTime, hopeArrive) {
      // //console.log(receiveTime, hopeArrive, "ddddddddddd");
      // 如果缺少必要参数，返回默认值
      if (!receiveTime || !hopeArrive)
        return { text: "正常配送中", color: "green" };

      // 解析预计送达时间范围
      const [date, timeRange] = hopeArrive.split(" ");
      const [startTime, endTime] = timeRange.split("-");

      // 构造预计送达时间结束点
      const hopeArriveEndDate = new Date(`${date}T${endTime}:00`);
      const now = new Date();

      // 如果当前时间小于预计送达时间结束点，返回正常配送中
      if (now < hopeArriveEndDate)
        return { text: "正常配送中...", color: "green" };

      // 计算超时时间
      const diff = now - hopeArriveEndDate;
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor(
        (diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
      );
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);

      let result = "已超时：";

      // console.log(days, hours, minutes, seconds, "222222222");

      if (days > 0) result += `${days}天`;
      if (hours > 0) result += `${hours}小时`;
      if (minutes > 0) result += `${minutes}分钟`;
      if (seconds > 0) result += `${seconds}秒`;
      return { text: result, color: "red" };
    },
    cancel1(id, index, item) {

      var temp_id = [
        // this.template_id.user_apply_cancel,
        this.template_id.business_refuse_user,
      ];


            // 正常取消订单逻辑
      // uni.showModal({
      //   title: "提示",
      //   content: "是否确认取消订单？",
      //   success: function (res) {
      //     if (res.confirm) {
      //       _this.processCancelOrder(id);
      //     }
      //   },
      // });

      //订阅消息
      const _this = this;
      uni.requestSubscribeMessage({
        tmplIds: temp_id,
        success(res) {
          _this.processCancelOrder(id);
        },
        fail(res) {
          // that.up_status == 2;
          if (res.errCode == 20004) {
            uni.showModal({
              title: "提示",
              content: "请前往设置打开接受通知",
              confirmText: "确定",
              success(res) {
                _this.processCancelOrder(id);
              },
            });
          } else {
            uni.showModal({
              title: "提示",
              content: "未订阅消息，无法接收到订单通知",
              confirmText: "确定",
              success(res) {
               _this.processCancelOrder(id);
              },
            });
          }
        },
      });
      // const _this = this;
      // // 正常取消订单逻辑
      // uni.showModal({
      //   title: "提示",
      //   content: "是否确认取消订单？",
      //   success: function (res) {
      //     if (res.confirm) {
      //       _this.processCancelOrder(id);
      //     }
      //   },
      // });
    },
    cancel(id, index, item) {
      var temp_id = [
        // this.template_id.user_apply_cancel,
        this.template_id.business_refuse_user,
      ];

      //订阅消息
      var that = this;
      uni.requestSubscribeMessage({
        tmplIds: temp_id,
        success(res) {
          that.createOrder(id, index, item);
        },
        fail(res) {
          // that.up_status == 2;
          if (res.errCode == 20004) {
            uni.showModal({
              title: "提示",
              content: "请前往设置打开接受通知",
              confirmText: "确定",
              success(res) {
                that.createOrder(id, index, item);
              },
            });
          } else {
            uni.showModal({
              title: "提示",
              content: "未订阅消息，无法接收到订单通知",
              confirmText: "确定",
              success(res) {
                that.createOrder(id, index, item);
              },
            });
          }
        },
      });
    },
    createOrder(id, index, item) {
      
      var that = this;
      // 检查是否超时十分钟
      const isOverTime = this.calculateOverTime1(
        item.receive_time,
        this.formatDateTime(item.hope_arrive)
      );
      const overTimeText = isOverTime.text; // "已超时：3小时24分钟14秒" 或 "已超时：24分钟14秒"
      const hoursMatch = overTimeText.match(/(\d+)小时/);
      const minutesMatch = overTimeText.match(/(\d+)分钟/);
      const secondsMatch = overTimeText.match(/(\d+)秒/);

      const hours = hoursMatch ? parseInt(hoursMatch[1]) : 0;
      const minutes = minutesMatch ? parseInt(minutesMatch[1]) : 0;
      const seconds = secondsMatch ? parseInt(secondsMatch[1]) : 0;

      // 计算总分钟数（小时转换为分钟，秒转换为分钟，向上取整）
      const overTimeMinutes = hours * 60 + minutes + Math.ceil(seconds / 60);
      // console.log(overTimeMinutes, "overTimeMinutesoverTimeMinutes");
      // 如果超时十分钟，显示免责取消提示
      if (overTimeMinutes >= 10) {
        uni.showModal({
          title: "提示",
          content: "订单已超时十分钟，可免责取消订单，系统将会退回全部费用。",
          success: function (res) {
            if (res.confirm) {
              that.processCancelOrder(id);
            }
          },
        });
      } else {
        // 正常取消订单逻辑
        uni.showModal({
          title: "提示",
          content: item.business_order_id
            ? !item.receive_id
              ? `确定取消订单？取消订单将会扣除全部费用的${item.super_goods.user_cancel_deduction}%`
              : "确定取消订单？取消订单将会扣除配送费跟保证金。"
            : "是否确认取消订单？",
          success: function (res) {
            if (res.confirm) {
              that.processCancelOrder(id);
            }
          },
        });
      }
    },
    processCancelOrder(id) {
      const _this = this;
      var path = "/xyb/order/cancel";
      var data = {
        orderid: id,
      };
      ikz.post(path, data, (res) => {
        if (res.data.code) {
          uni.showToast({
            title: "取消成功",
            duration: 2000,
          });
          // this.show_info.list[index].status = 4;
          // if (this.show_info.list.length == 0) {
          //   this.load_more = 5;
          // }
          // this.orderList(() => {
          //   this.$forceUpdate();
          // });

          _this.orderList((res) => {});
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
      });
    },
    confirm(id, index) {
      var that = this;
      uni.showModal({
        title: "提示",
        content: "确定订单已收货？",
        success: function (res) {
          if (res.confirm) {
            var path = "/xyb/order/confirm_complete";
            var data = {
              orderid: id,
            };
            uni.showLoading({
              title: "加载中",
            });
            ikz.post(path, data, (res) => {
              // console.log(res,'...');
              uni.hideLoading();
              if (res.data.code == 0) {
                uni.showToast({
                  title: "收货成功",
                  duration: 2000,
                });
                that.show_info.list[index].status = 3;
                if (that.show_info.list.length == 0) {
                  that.load_more = 5;
                }
                that.orderList((res) => {});
              } else {
                uni.showModal({
                  title: "提示",
                  content: res.data.msg,
                  showCancel: false,
                  success: function (res) {},
                });
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>

<style scoped>
.ikz-bid {
  background: #f8f9fa;
  min-height: 100vh;
  padding: 20rpx;
  box-sizing: border-box;
}

/* 顶部导航栏 */
.ikz-sticky-box {
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: var(--window-top);
  z-index: 99;
  padding: 20rpx 0;
  background: #fff;
  border-bottom: 1rpx solid #eee;
  overflow: auto;
}

.ikz-sticky-title {
  flex: 1;
  text-align: center;
  padding: 0 10rpx;
}

.ikz-textcenter {
  display: inline-block;
  padding: 12rpx 24rpx;
  font-size: 28rpx;
  color: #666;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.ikz-textcenter.active {
  color: #fdaf66;
  font-weight: 500;
  position: relative;
}

.ikz-textcenter.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10rpx;
  width: 40rpx;
  height: 4rpx;
  background: #fdaf66;
  transform: translateX(-50%);
  border-radius: 2rpx;
}

/* 订单卡片 */
.ikz-box {
  margin-top: 20rpx;
}

.ikz-sticky-item {
  margin-bottom: 20rpx;
  padding: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  border: 1rpx solid #eee;
}

.ikz-sticky-top {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
}

.ikz-sticky-img {
  width: 160rpx; /* 从120rpx调整为160rpx */
  height: 160rpx; /* 从120rpx调整为160rpx */
  border-radius: 16rpx; /* 从12rpx调整为16rpx */
  object-fit: cover;
  margin-right: 30rpx;
  border: 2rpx solid #eee;
}

.ikz-sticky-head-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ikz-sticky-head-right-box {
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
}

.ikz-sticky-head-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 12rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ikz-sticky-head-time {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 12rpx;
}

.ikz-sticky-head-card {
  background: #fdaf66;
  color: #fff;
  padding: 8rpx 20rpx;
  border-radius: 40rpx;
  font-size: 26rpx;
  display: inline-block;
  margin-right: 10rpx;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ikz-sticky-head-price {
  font-size: 32rpx;
  color: #ff6565;
  font-weight: 600;
  margin-top: 12rpx;
}

.ikz-sticky-content {
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.ikz-sticky-start {
  padding: 20rpx 0;
  border-top: 1rpx solid #eee;
  font-size: 28rpx;
  color: #666;
  display: flex;
  align-items: center;
}

.ikz-sticky-spot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #76a8fd;
  margin-right: 16rpx;
}

.ikz-sticky-spot1 {
  background: #ff8800;
}

.ikz-sticky-spot2 {
  background: #42d5be;
}

.ikz-sticky-buttom {
  padding: 20rpx 0 0;
  border-top: 1rpx solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  margin-top: 20rpx;
}

.ikz-sticky-btn,
.ikz-sticky-btn1,
.ikz-sticky-btn2,
.ikz-sticky-btn3,
.ikz-sticky-btn4 {
  padding: 12rpx 22rpx;
  border-radius: 40rpx;
  font-size: 27rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  outline: none;
  flex-shrink: 0;
}

.ikz-sticky-btn {
  background: #ff6565;
  color: #fff;
}

.ikz-sticky-btn1 {
  background: #d54242;
  color: #fff;
}

.ikz-sticky-btn2 {
  background: #76a8fd;
  color: #fff;
}

.ikz-sticky-btn3 {
  background: #f5f5f5;
  color: #999;
}

.ikz-sticky-btn4 {
  background: #42d5be;
  color: #fff;
}

.ikz-more {
  padding: 60rpx 0;
  color: #ccc;
  font-size: 28rpx;
  text-align: center;
}

.ikz-empty {
  width: 200rpx;
  height: 200rpx;
  opacity: 0.6;
  margin: 100rpx 0;
  filter: grayscale(0.8);
}
</style>